<script setup lang="jsx">
import { reactive, ref } from 'vue';
import { Empty } from 'ant-design-vue';
import { mesreadCodegetDevice } from '@/service/api/modules/collection-management/borehole-data';
import { getTableData } from '@/service/api/modules/collection-management/tracking-code-acquisition';
import Modal from '@/components/common/modal.vue';
import SearchBox from './search.vue';
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

const searchParams = ref({
  description: ''
});
const loading = ref(false);
const olaList = ref([]);
const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '180', '300', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData1(secList.value.equipmentId);
  }
});
const zc = ref(0);
const yc = ref(0);
function getData() {
  zc.value = 0;
  yc.value = 0;
  mesreadCodegetDevice({
    ...searchParams.value
  }).then(({ error, data }) => {
    if (!error) {
      data.forEach((item, index) => {
        if (item.state == 0) {
          zc.value += 1;
        }
        if (item.state == 1) {
          yc.value += 1;
        }
      });
      olaList.value = data;
    }
  });
}

getData();

const tableData = ref([]);

function getData1(val) {
  loading.value = true;
  const params = {
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
    equipmentId: val
  };

  getTableData(params)
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item, index) => {
          item.index = index + 1;
        });

        pagination.total = data.total;
        tableData.value = data.list;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}
const detailsVisibleQrcode = ref(false);
const secList = ref({});
const title = ref('');
function showDm(val) {
  pagination.current = 1;
  pagination.pageSize = 200;
  secList.value = val;
  tableData.value = [];
  title.value = `${secList.value.description}信息`;
  loading.value = true;
  getData1(secList.value.equipmentId);
  detailsVisibleQrcode.value = true;
}
const columns = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'pnlId',
    dataIndex: 'pnlId',
    title: 'PNL码',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'trackType',
    dataIndex: 'trackType',
    title: '过账动作类型',
    width: '200',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.trackType === 'TRACKIN') {
        return '上机';
      }
      return '下机';
    }
  },
  {
    key: 'sliceType',
    dataIndex: 'sliceType',
    title: '片型',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'dateTime',
    dataIndex: 'dateTime',
    title: '建立时间',
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);
</script>

<template>
  <div class="jl-main-page h-full w-full">
    <div class="list w-full">
      <ARow v-if="olaList.length" :gutter="16" class="w-full">
        <ACol v-for="(item, index) of olaList" :key="index" :lg="12" :xl="8" :xxl="6">
          <div class="listClass" :style="{ border: item.state === 0 ? '0px' : '1px solid red' }">
            <div class="leftClass">
              <div class="titClass">{{ index + 1 }}</div>
              <div v-if="item.state == 0" class="rightImg"></div>
              <div v-if="item.state == 1" class="rightImg1"></div>
            </div>
            <div class="rightClass">
              <div class="flex">
                <p class="text-size-14px color-#333 font-800">名称:</p>
                <p>{{ item.description }}</p>
              </div>
              <div class="flex">
                <p class="color-#333 font-800">代码:</p>
                <p>{{ item.equipmentId }}</p>
              </div>
              <div class="flex">
                <p class="color-#333 font-800">状态:</p>
                <p>{{ item.state == 0 ? '正常' : '异常' }}</p>
              </div>
              <div class="flex">
                <p class="color-#333 color-#333 font-800">最近连接时间:</p>
                <p>{{ item.recentConnectionTime }}</p>
              </div>
              <div class="flex">
                <p class="color-#333 color-#333 font-800">设备地址:</p>
                <p>{{ item.locationId }}</p>
              </div>
              <div class="flex">
                <a class="color-#646cff" @click="showDm(item)">查看读码信息</a>
              </div>
            </div>
          </div>
        </ACol>
      </ARow>
      <template v-else>
        <div class="h-full w-full flex-center bg-#fff">
          <AEmpty :image="simpleImage" />
        </div>
      </template>

      <Modal
        v-model:visible="detailsVisibleQrcode"
        :destroy-on-close="true"
        :centered="true"
        :title="title"
        width="950px"
        height="650px"
      >
        <ATable
          :columns="columns"
          :data-source="tableData"
          size="small"
          :loading="loading"
          bordered
          row-key="custOrderId"
          :default-expand-all-rows="true"
          :scroll="{ x: 950, y: 'auto' }"
          :pagination="pagination"
          class="h-full"
        />

        <template #footer>
          <div class="modal-footer">
            <AButton @click="detailsVisibleQrcode = false">关闭</AButton>
          </div>
        </template>
      </Modal>
    </div>
    <div class="footer">
      <div class="ml-2% flex font-700 line-height-30px">
        <div class="color-red">红色边框</div>
        为异常状态 设备共
        <u>{{ zc + yc }}</u>
        个 正常设备
        <u>{{ zc }}</u>
        个 异常设备
        <div class="color-red">
          <u>{{ yc }}</u>
        </div>
        个
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.jl-main-page .list {
  // margin: 8px 0;
  height: calc(100% - 28px);
  overflow: auto;
}
.jl-main-page .footer {
  height: 30px;
  background: #fff;
  box-shadow: 0 0 10px 1px rgba(128, 128, 128, 0.2);
  border-radius: 8px;
}
.bgClor {
  height: 15px;
  width: 24px;
  background-color: rgba(255, 255, 128, 0.13);
}
.listAllClass {
  position: relative;
  display: flex;
  flex-wrap: wrap; /* 允许子元素转行 */
  // justify-content: center;
  align-content: center;
  margin-left: 4%;
}
.listClass {
  width: 100%;
  box-shadow: 0 0 10px 1px #80808033;
  border-radius: 10px;
  margin: 10px;
  background: #fff;
  // height: 180px;
  display: flex;
}
.leftClass {
  width: 25%;
  margin-right: 5%;
  text-align: center;
  // margin-top: 5%;
}
.rightClass {
  margin-top: 1%;
  // text-align: center;
}
.titClass {
  font-size: 18px;
  color: rgb(71, 71, 221);
  font-weight: 600;
  text-align: center;
  margin-left: 10%;
}

.rightImg {
  // background-image: url('@/assets/imgs/dmt.png');
  width: 100px;

  height: 70%;
  margin-left: 3%;
  background-size: 90% 90%;
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 防止图片重复 */
}
.rightImg1 {
  // background-image: url('@/assets/imgs/dmt1.jpeg');
  width: 100px;

  height: 70%;
  margin-left: 3%;
  background-size: 90% 90%;
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 防止图片重复 */
}

.diveice-search-list {
  width: 280px;
  box-shadow: 0 0 10px 1px rgba(128, 128, 128, 0.2);
  border-radius: 8px;
  background-color: #fff;
  .header {
    text-align: center;
    color: #646cff;
    font-size: 18px;
    font-weight: bold;
    padding: 5px;
    .title {
      border-bottom: 2px solid #646cff;
      padding: 0 8px;
    }
  }
  .card-list {
    height: calc(100% - 62px);
    overflow: auto;
    .card-item {
      align-items: center;
      height: 60px;
      background-color: rgb(245, 247, 251);
      padding: 15px;
      border-radius: 8px;
      font-size: 16px;
      margin-top: 15px;
      box-shadow: 0 0 10px 1px rgba(128, 128, 128, 0.2);

      &:first-child {
        margin-top: 0;
      }
      &.active {
        background-color: #fff;
        position: relative;
        &:before {
          content: '';
          position: absolute;
          display: inline-block;
          top: 0;
          left: 0;
          width: 5px;
          height: 100%;
          border-radius: 8px;
          background-color: #646cff;
        }
        .name {
          color: #646cff;
        }
      }

      &.error {
        background-color: rgba(255, 0, 0, 0.1);
      }
    }
  }
}

.diveice-list {
  width: calc(100% - 280px);
}
</style>
